<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        //先拆分img
        function Myimg(props) {
            return (
                <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name}/>
            )
        }
        //拆分UserInfo
        function MyuserInfo(props) {
            return(
                    <div className="UserInfo">
                        <Myimg user={props.user}/>
                        <div className="UserInfo-name">
                            {props.user.name}
                        </div>
                    </div>
            )
        }
        //拆分字符串
        function Mytext(props) {
            return(
                <div className="Comment-text">
                    {props.text}
                </div>
            )
        }

        //拆分date时间
        function Mydate(props) {
            return(
               <div className="Comment-date">
                   {props.date}
               </div>
            )
        }

        let user={name:"bobo",avatarUrl:"123.jpg"}
        let data=new Date().toLocaleTimeString()
        let text='字符串'
        ReactDOM.render(
            <Comment/>,
            document.getElementById("app")
        )
        //这是一个组件
        function Comment(props) {
            return (
                <div className="Comment">
                   <MyuserInfo user={user}/>
                   <Mytext text={text}/>
                   <Mydate date={data}/>
                </div>
            );
        }


    </script>
</body>
</html>